<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layuiAdmin 主页示例模板二</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
</head>
<body>
<div >
	<select name="pid"  id="pid" style="margin-top: 30px;margin-left: 1140px" >
		<option value="0" >选择查询时间段</option>
		<option value="7">近7天</option>
		<option value="15">近15天</option>
		<option value="30">近30天</option>
	</select>
</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">

			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						访问量 <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font"><input type="text"  value="${applicationScope.count}" style="border: 0px"></p>
						<!-- <p>
							总计访问量 <span class="layuiadmin-span-color">88万 <i
								class="layui-inline layui-icon layui-icon-flag"></i></span>
						</p> -->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						用户数 <span class="layui-badge layui-bg-cyan layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font" id="userCount"><input type="text"  value="${usernum}" style="border: 0px"></p>
						<!-- 	<p>
							<span class="layuiadmin-span-color"> <i
								class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
						</p> -->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						订单数

						<span class="layui-badge layui-bg-green layuiadmin-badge">总</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p class="layuiadmin-big-font" id="orderCount"><input type="text" id="adad1" value="${recordnum}" style="border: 0px"></p>

					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header" >
						营业额<span class="layui-badge layui-bg-cyan layuiadmin-badge">总

							</span>


					</div>

					<div class="layui-card-body layuiadmin-card-list">

						<p id="totalTurnover" class="layuiadmin-big-font"><input type="text" id="adad" value="${total}" style="border: 0px"></p>

<!-- 						<p>
							最近一个月 <span class="layuiadmin-span-color">15% <i
								class="layui-inline layui-icon layui-icon-user"></i></span>
						</p> -->
					</div>
				</div>
			</div>

	<div id="main" style="width: auto; height: 500px;"></div>


	<script src="layuiadmin/echar/echarts.min.js"></script>
	<script src="layuiadmin/layui/layui.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
        $("#pid").change(function(){
            var opt=$("#pid").val();
            //执行重载
            $.ajax({
                type: "get",
                url: "console/"+opt,
                contentType: "application/json",
                success: function (cm) {

                    $("#adad").val(cm.msg);
                    $("#adad1").val(cm.code);
                }

            });


        });
        })
       // form.render('select');
		layui.use([ 'layer', 'jquery' ], function() {
			var layer = layui.layer;
			var $ = layui.jquery;
			var checkInDateArray = [];
			var countArray = [];
			//此处使用jquery的ajax方法获取统计数据，将值放到图表中
			$.ajax({
				url : "rc/getrecord",
				type : "get",
				dataType : "json",
				success : function(data) {
					//console.log(data)
					//得到一个数组,需要遍历
					$.each(data, function(index, obj) {
						//console.log(obj.checkInDate + "," + obj.count);
						//将值添加到数据
						checkInDateArray.push(obj.cdays);
						countArray.push(obj.count);

						var myChart = echarts.init(document
								.getElementById('main'));

						// 指定图表的配置项和数据
						var option = {
							title : {
								text : '七天订单图'
							},
							tooltip : {},
							legend : {
								data : [ '订单量' ]
							},
							xAxis : {
								data : checkInDateArray
							},
							yAxis : {},
							series : [ {
								name : '订单数',
								type : 'bar',
                                barWidth:'55px',
								color:'#06c2b8',
								data : countArray
							} ]
						};

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);

					});
				}

			});
		});

		// 基于准备好的dom，初始化echarts实例
	</script>







	<script>
		layui.config({
			base : 'layuiadmin/' //静态资源所在路径
		}).extend({
			index : 'lib/index' //主入口模块
		}).use([ 'index', 'sample' ]);
	</script>
</body>
</html>